<template>
    <div class="dragMessage" ref="dragMessage">
       <div ref="dd">{{message}}</div>
    </div>
</template>

<script lang='ts' setup>
    import {getCurrentInstance, ref,ComponentInternalInstance,watch,nextTick} from 'vue'
    let message = ref('')
    const $el = getCurrentInstance() as ComponentInternalInstance
    electronIpc.ipcOn('drageMessage',()=>{
    })
    electronIpc.ipcOn('send-to-drag-Message',(e:any,result:Array<electronType.dragMessage>)=>{
        console.log(result[0].message);
        message.value = result[0].message
        nextTick(()=>{
            let messageDom = $el.refs.dd as HTMLElement
            electronIpc.ipcSend('change-drag-width',{width:messageDom.offsetWidth})
        })
    })
    electronIpc.ipcOn('send-to-drag-end',(e:any)=>{
        message.value = ''
    })
    electronIpc.ipcOn('send-to-drag-bkColor',(e:any,result:Array<electronType.dragColor>)=>{
        let dom = $el.refs.dragMessage as HTMLElement
        dom.style.backgroundColor = result[0].backGroundColor
        let messageDom = $el.refs.dd as HTMLElement
        messageDom.style.color = result[0].fontColor
        console.log(result[0].backGroundColor);
        if(result[0].backGroundColor == 'rgb(43,43,43)'){
            dom.style.borderColor = 'rgb(66,66,66)'
            dom.style.backgroundColor = 'rgb(62,62,62,0.5)'
        }else{
            dom.style.borderColor = 'rgb(216,216,216)'
            dom.style.backgroundColor = 'rgb(253,253,253,0.5)'
        }
        //414141
        //216216216
    })
</script>

<style lang='less' scoped>
    .dragMessage{
        width: auto;
        height: 23px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rgb(216,216,216);
        border-radius: 0.2em;
        opacity: 0.6;
        >div{
            white-space: nowrap;
            display: inline-flex;
            width: auto;
            padding-left: 3px;
            padding-right:3px ;
            font-size: 12px;
        }
    }
</style>